<template>
  <div>
    <button @click="comName = 'UserAccount'">显示UserAccount</button>
    <button @click="comName = 'UserInfo'">显示UserInfo</button>
    <!-- 使用 component 标签来解决这个问题 -->
    <!-- is 指定组件名，会将对应组件名的组件渲染到此处，修改 comName 会动态切换对应的组件 -->
    <components :is="comName" />
  </div>
</template>

<script>
import UserAccount from "./components/UserAccount.vue";
import UserInfo from "./components/UserInfo.vue";
export default {
  components: {
    UserAccount,
    UserInfo,
  },
  data() {
    return {
      comName: "UserAccount",
    };
  },
};
</script>

<style lang="scss" scoped>
</style>